import React, { Component } from 'react';
import {
	Text, View, Image, StyleSheet, TouchableOpacity, DeviceEventEmitter, PixelRatio
} from "react-native";
import { CURRENCY } from '../../../../../utils/helper';
import MethodUtil from '../../../../../utils/MethodUtil';
import { GLOBAL } from '../../../../../config/global';
import { CommonDialog } from '../../../../../components/common/Dialog';
import ConstData from '../../../../../utils/constData';
const scale = GLOBAL.SCALE;
const query = require('../../../../../imgs/global/query.png');

//商品信息

export class CostBenefit extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modalVisible: false,
			modalShow: 'explanation'
		}
	}

	async componentWillMount() {
		let Const = await ConstData.get();
		if (Const) {
			this.constProportion = Const.ORDER_PRICE_FEE_RATE;
		}
	}

	_renderToastWrap = () => {
		let { costData } = this.props
		let costDataList = costData.orderItemList[0]
		return (
			<View>
				{this.state.modalShow === 'explanation' ?
					<View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>1. 单价成本</Text>
							<Text style={styles.toastText}>销售：关联订单的成交均价（=总价/总量）</Text>
							<Text style={styles.toastText}>采购：即填入的采购单价成本</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>2. 运费</Text>
							<Text style={styles.toastText}>成本=我司物流产生的运费成本</Text>
							<Text style={styles.toastText}>销售=（即：额外运费），商品超出配送范围额外产生的运费，计入商品单价</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>3. 资金（授信）</Text>
							<Text style={styles.toastText}>成本= 加权平均单价*{this.constProportion}%*授信天数/365（闭口订单=采销合计）</Text>
							<Text style={styles.toastText}>销售= 业务手动维护，计划商品单价（适用于壹化转单（销售））</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>4.资金（票据）</Text>
							<Text style={styles.toastText}>销售= 加权平均单价*{this.constProportion}%*票据期限天数/365</Text>
							<Text style={styles.toastText}>销售转单= 业务手动维护，计入商品单价（适用于壹化转单（销售））</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>5. 杂费成本</Text>
							<Text style={styles.toastText}>本单费用成本均价（=总价/总量）</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>6. 落袋价计算规则</Text>
							<Text style={styles.toastText}>采购= 成本合计</Text>
							<Text style={styles.toastText}>销售= 销售合计-成本合计（不含成本单价）</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>7. 预计毛利 </Text>
							<Text style={styles.toastText}>销售合计-成本合计（*如成本单价为空，毛利为：-）</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastTitle}>8. 商品总额=合同单价*数量</Text>
							<Text style={styles.toastText}>壹化转单合同单价：</Text>
							<Text style={styles.toastText}>1.销售=壹化单价+授信成本+票据成本+额外运费</Text>
							<Text style={styles.toastText}>2.采购=壹化单价+额外运费</Text>
							<Text style={[styles.toastText, { marginTop: 10 }]}>化销成交合同单价：</Text>
							<Text style={styles.toastText}>采/销=业务输入的合同（即：打包）单价</Text>
						</View>
					</View>
					:
					<View>
						<View style={styles.toastBox}>
							<Text style={styles.toastText}>壹化网单价:{costDataList.barePrice}元/吨</Text>
						</View>
						<View style={styles.toastBox}>
							<Text style={styles.toastText}>额外运费:{costDataList.logisticsPrice}元/吨</Text>
						</View>
					</View>
				}

			</View>
		)
	}
	dataFilter(data) {
		if (data || data === 0) {
			return data
		}
		else {
			return '-'
		}
	}
	render() {
		let { modalVisible } = this.state;
		let { costData, data, bizMode, click, propsData, tCode, orderAllInfo } = this.props
		let costDataList = costData.orderItemList[0]
		let costDataListTotal = costData.orderItemList[0].resOrderMappingTotal || {}
		let pnobiz = false
		let snobiz = false
		let oneone, twoone
		if (data.orderType == 'P' && bizMode === 0) { // 现货采
			//判断是否为采购
			pnobiz = true
		}
		if (data.orderType == 'S' && bizMode === 0) { //现货销
			snobiz = true
		}
		if (costData.bidId && snobiz) { //转单销售
			oneone = costDataList.barePrice
			twoone = costDataList.itemMappingPrice
		} else if (bizMode === 0 && !costData.bidId) { // 现货销/现货采
			oneone = costDataList.barePrice
			twoone = costDataList.itemMappingPrice
		} else { // 泉化转单/普通泉化/闭口/转单采购
			oneone = costDataList.price
			twoone = costDataList.itemMappingPrice
		}
		let flagData = {
			orderType: costData.orderType,
			orderId: costData.orderType,
			logisticsPrice: costData.orderType,
			tCode
		}
		let rebatePrice = costDataList.rebatePrice || null;//优惠价
		let regionName = costDataList.regionName || null;//优惠价
		return (
			<View style={styles.itemBox}>
				<View>
					{costData && data ?
						<View>
							<View style={styles.costBox}>
								<View style={[styles.flexRow, { paddingLeft: 15 }]}>
									<Text style={styles.costTitle}>成本收益(元/吨)</Text>
									<TouchableOpacity onPress={() => { this.setState({ modalVisible: true, modalShow: 'explanation' }) }}>
										<Image style={{ marginLeft: 10 }} source={query} />
									</TouchableOpacity>
								</View>
								<View style={styles.costTable}>
									<View style={styles.costTableHorizontal}>
										<View style={styles.costTableLeft}>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableTitle}>{pnobiz ? '成本' : '销售'}</Text>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableTitle}>
												{pnobiz ? '关联销售' : '成本'}
											</Text>
										</View>
									</View>
									{data.priceType === 2 && bizMode === 1 ?
										//  闭口暂定价升贴水
										<View style={styles.costTableHorizontal}>
											<View style={styles.costTableLeft}>
												<Text style={styles.costTableTitle}>
													升贴水
												</Text>
											</View>
											<View style={styles.costTableRight}>
												<Text style={styles.costTableText}>{costDataList.saleUdPrice || '-'}</Text>
											</View>
											<View style={styles.costTableRight}>
												<Text style={styles.costTableText}>{costDataList.purchaseUdPrice || '-'}</Text>
											</View>
										</View> :
										<View style={styles.costTableHorizontal}>
											<View style={styles.costTableLeft}>
												<Text style={styles.costTableTitle}>
													单价
												</Text>
											</View>
											<View style={styles.costTableRight}>
												{costData.bidId && pnobiz ?
													<TouchableOpacity onPress={() => { this.setState({ modalVisible: true, modalShow: 'price' }) }}>
														<Text style={[styles.costTableText, { color: '#0091FF' }]}>{oneone}</Text>
													</TouchableOpacity> :
													<Text style={styles.costTableText}>{oneone}</Text>
												}

												{bizMode === 1 || (pnobiz && !costData.bidId) || (snobiz && !costData.bidId) ?
													<Text style={styles.costTableRed}>(单价)</Text> : null
												}
												{costData.bidId && snobiz ?
													<Text style={styles.costTableRed}>(壹化)</Text> : null
												}
												{costData.bidId && pnobiz ?
													<Text style={styles.costTableRed}>(壹化合同)</Text> : null
												}
											</View>
											<TouchableOpacity style={styles.costTableRight} onPress={() => {
												if (bizMode == 0 && (twoone || twoone === 0)) {
													propsData.navigation.navigate('relevanceDetailPage', { resultData: orderAllInfo, flagData })
												}
											}}>
												<Text style={[styles.costTableText, bizMode == 0 && twoone ? { color: '#0091FF' } : null]}>{this.dataFilter(twoone)}</Text>
												{twoone || twoone === 0 ?
													<View>
														{bizMode === 1 ?
															<Text style={styles.costTableRed}>(合同)</Text> :
															<View style={styles.costTableType}>
																<Text style={styles.costTableTypeText}>暂</Text>
															</View>}
													</View> : null
												}
											</TouchableOpacity>

										</View>
									}
									{/* 运费 */}
									<View style={styles.costTableHorizontal}>
										<View style={styles.costTableLeft}>
											<Text style={styles.costTableTitle}>运费</Text>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableText}>{pnobiz ? costData.logisticsFee || '-' : costData.logisticsPrice || '-'}</Text>
										</View>
										{pnobiz ?
											<View style={styles.costTableRight}>
												<Text style={styles.costTableText}>-</Text>
											</View>
											:
											<View style={styles.costTableRight}>
												<Text style={styles.costTableText}>{costData.logisticsFee || '-'}</Text>
											</View>
										}

									</View>
									{/* 资金（授信） */}
									<View style={styles.costTableHorizontal}>
										<View style={styles.costTableLeft}>
											<Text style={styles.costTableTitle}>资金（授信）</Text>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableText}>{pnobiz ? costData.fundCreditFee || '-' : costData.fundCreditInputFee || '-'}</Text>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableText}>{pnobiz ? costData.fundCreditInputFee || '-' : costData.fundCreditFee || '-'}</Text>
										</View>
									</View>
									{/* 资金（票据） */}
									<View style={styles.costTableHorizontal}>
										<View style={styles.costTableLeft}>
											<Text style={styles.costTableTitle}>资金（票据）</Text>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableText}>{pnobiz ? costData.fundVoucherFee || '-' : costData.fundVoucherInputFee || '-'}</Text>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableText}>{pnobiz ? costData.fundVoucherInputFee || '-' : costData.fundVoucherFee || '-'}</Text>
										</View>
									</View>
									{/* 优惠 */}
									{
										rebatePrice ? (
											<View style={styles.costTableHorizontal}>
												<View style={styles.costTableLeft}>
													<Text style={styles.costTableTitle}>客户优惠</Text>
												</View>
												<View style={styles.costTableRight}>
													<Text style={styles.costTableText}>-{rebatePrice}({regionName})</Text>
												</View>
												<View style={styles.costTableRight}>
													<Text style={styles.costTableText}>-</Text>
												</View>
											</View>
										) : null
									}
									{/* 杂费 */}
									<View style={styles.costTableHorizontal}>
										<View style={styles.costTableLeft}>
											<Text style={styles.costTableTitle}>杂费</Text>
										</View>
										<TouchableOpacity style={styles.costTableRight} onPress={() => {
											if (click && pnobiz && costData.averageOtherCost) {
												DeviceEventEmitter.emit('showCostDetails')
											}
										}}>
											<Text style={[styles.costTableText, pnobiz && costData.averageOtherCost ? { color: '#0091FF' } : null]}>{pnobiz ? costData.averageOtherCost || '-' : '-'}</Text>
										</TouchableOpacity>
										<TouchableOpacity style={styles.costTableRight} onPress={() => {
											if (click && snobiz && costData.averageOtherCost) {
												DeviceEventEmitter.emit('showCostDetails')
											}
										}}>
											<Text style={[styles.costTableText, snobiz && costData.averageOtherCost ? { color: '#0091FF' } : null]}>{pnobiz ? '-' : costData.averageOtherCost || '-'}</Text>
										</TouchableOpacity>
									</View>
									<View style={styles.costTableLine}></View>
									<View style={styles.costTableHorizontal}>
										<View style={styles.costTableLeft}>
											<Text style={styles.costTableTitle}>合计</Text>
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableText}>{pnobiz ? this.dataFilter(costDataListTotal.purchaseTotalAcount) : this.dataFilter(costDataListTotal.saleTotalAcount)}</Text>
											{pnobiz ?
												<Text style={styles.costTableRed}>(落袋)</Text> : null
											}
											{snobiz ?
												<Text style={styles.costTableRed}>(合同)</Text> : null
											}
										</View>
										<View style={styles.costTableRight}>
											<Text style={styles.costTableText}>{pnobiz ? this.dataFilter(costDataListTotal.saleTotalAcount) : this.dataFilter(costDataListTotal.purchaseTotalAcount)}</Text>
										</View>
									</View>
									{bizMode == 0 ?
										<View style={styles.costTableBottom}>
											<Text style={styles.costTableBottomText}>落袋价：{costDataListTotal.pocketPrice || 0} 元/吨</Text>
										</View> : null
									}

									<View style={styles.costTableBottom}>
										<Text style={styles.costTableBottomText}>预计毛利：{this.dataFilter(costDataListTotal.planGrossProfit)} 元/吨</Text>
									</View>
									<View style={styles.costTableBottom}>
										<Text style={styles.costTableBottomText}>数量：{costDataListTotal.quantity || 0} 吨，
										{bizMode == 0 ?
												<Text>商品总额：{costDataListTotal.amount || 0}元</Text>
												: <Text>采总额：{costDataListTotal.purchaseAmount || 0}元,销总额：{costDataListTotal.saleAmount || 0}元</Text>}
										</Text>
									</View>
									<View style={styles.costTableBottom}>
										<Text style={styles.costTableBottomText}>关联数量：
											{this.dataFilter(costDataListTotal.mappingQuantity)} 吨，</Text>
										<Text style={styles.costTableBottomTextRed}>预计总毛利：
											{this.dataFilter(costDataListTotal.grossProfitCnt)} 元</Text>
									</View>
								</View>
							</View>
						</View> :
						null
					}
				</View>
				<CommonDialog modalVisible={modalVisible} title={'提示'} renderCustom={this._renderToastWrap} onClosePress={() => { this.setState({ modalVisible: false }) }} />
			</View >
		)
	}
}
const styles = StyleSheet.create({
	itemBox: {
		backgroundColor: '#fff',
		borderRadius: 6,
		paddingBottom: 10,
		overflow: 'hidden',
	},
	getCost: {
		paddingTop: 22,
		justifyContent: 'space-between',
		flexDirection: 'row',
		alignItems: 'center'
	},
	flexRow: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	costTitle: {
		fontSize: 12,
		color: '#040404',
		fontWeight: 'bold'
	},
	itemTitle: {
		fontSize: 14,
		color: '#040404',
		fontWeight: '500'
	},
	body: {
		paddingTop: 10 * scale,
	},
	priceType: {
		fontSize: 10,
		paddingVertical: 2,
		paddingHorizontal: 5,
		backgroundColor: '#FBEFE8',
		marginRight: 55
	},
	udPrice: {
		fontSize: 11
	},
	costBox: {
		backgroundColor: '#F4F7FE',
		borderRadius: 6,
		paddingTop: 8,
		paddingBottom: 17,
		// height: 500
	},
	toastTitle: {
		fontSize: 12
	},
	toastText: {
		fontSize: 12,
		fontWeight: 'bold',
		marginLeft: 12
	},
	toastBox: {
		marginBottom: 20
	},
	costTableHorizontal: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 14,
		paddingLeft: 15,
	},
	costTableLeft: {
		width: 110 * scale,
		flexDirection: 'row',
		alignItems: 'center',
	},
	costTableRight: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
	},
	costTable: {
	},
	costTableTitle: {
		opacity: 0.8,
		fontSize: 11,
		color: '#000000'
	},
	costTableRed: {
		fontSize: 10,
		color: '#FB0404',
		fontWeight: 'bold',
		marginLeft: 5,
		marginRight: 5
	},
	costTableLine: {
		borderBottomWidth: 1 / PixelRatio.get(),
		backgroundColor: '#E3E7F0',
		borderStyle: 'solid',
		opacity: 0.3,
		marginTop: 5,
	},
	costTableType: {
		backgroundColor: '#FBEFE8',
		borderRadius: 2,
		paddingHorizontal: 6,
		paddingVertical: 3,
		marginLeft: 5
	},
	costTableTypeText: {
		fontSize: 10,
		color: '#FA6400',
	},
	costTableBottom: {
		marginTop: 9,
		flexDirection: 'row',
		justifyContent: 'flex-end',
		paddingRight: 20
	},
	costTableBottomText: {
		fontSize: 11
	},
	costTableBottomTextRed: {
		fontSize: 11,
		color: '#FB0404',
	},
	modeType: {
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		marginRight: 10,
		backgroundColor: '#F7B500'
	},
	modeTypeSale: {
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		marginRight: 10,
		backgroundColor: '#3E7406'
	},
	modeTypeText: {
		fontSize: 11,
		color: '#FFFFFF'
	},
	costTableRightTitle: {
		opacity: 0.8,
		fontSize: 12,
		color: '#000'
	},
	priceFlag: {
		width: 9,
		height: 7
	},
	tableUpText: {
		fontSize: 10,
		color: '#E02020'
	},
	tableDownText: {
		fontSize: 10,
		color: '#56C910'
	},
	costTableText: {
		fontSize: 12
	}
})